<template>
	<view class="content">

		<u-sticky>
			<view class="container" :style="[{'top': customBarH + 'rpx'}]">
				<u--text class="topic-title" align="center" size="16px" :text="titleText"></u--text>
			</view>
			<view class="top-background" :style="[{'height': top_backgroundH + 'rpx'}]">
			</view>
		</u-sticky>

		<view class="main" v-if="!ifLogin">
			<view class="top-content">
				<view class="top-content-avatar">
					<image class="top-content-avatar-img" :src="avatarUrl">
					</image>
				</view>
				<view class="top-content-text"
					style="margin-top: -15px;margin-left: 10px;display: grid;grid-template-columns: 4fr 1fr;">
					<u--text class=" top-content-text-content" :text="username" size="19">
					</u--text>
					<u-icon name="setting" color="#c0bec1" size="28" top="10px"></u-icon>
				</view>
			</view>
			<view style="display: flex;width: 100%;height: 40vh;position: relative;">
				<image
					style="height: 110px;width: 130px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-20%);opacity:0.2;"
					src="https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/xxjlogo.png">
			</view>
		</view>

		<view class="loginMain" v-if="ifLogin">
			<view class="loginLogo">
				<image class="loginLogo-img"
					src="https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/logoLoginTop.png" mode="">
				</image>
			</view>
			<view class="loginButton">
				<u-button class="loginButton-content" color="#58C099" shape="circle" text="微信快捷登录"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBarH: 0,
				offsetTopH: 0,
				top_backgroundH: 0,
				titleText: "个人信息",
				ifLogin: true, //true为已登录，false为未登录
				avatarUrl: 'https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/WechatIMG1.jpeg',
				username: '猪八戒',
				nickname: '', // 注册时弹框中填写的用户名
				avatar: '', //  注册时弹框中收集到的头像
			}
		},
		methods: {
			checkIfLogin() {

			},
		},
		created() {
			this.customBarH += uni.getSystemInfoSync().statusBarHeight
			this.customBarH += uni.getMenuButtonBoundingClientRect().height
			this.customBarH += 40
			this.top_backgroundH = this.customBarH + uni.getMenuButtonBoundingClientRect().bottom
			this.offsetTopH += uni.getMenuButtonBoundingClientRect().bottom //搜索栏位置
		},
		onLoad() {
			this.ifLogin = false;
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.container {
		width: 750rpx;
		left: 50%;
		z-index: 2; //使之浮在上层
		position: absolute; //使之浮在上层
		transform: translate(-50%);
		overflow: 0;
	}

	.top-background {
		z-index: 1;
		background-color: #ffffff;
		width: 750rpx;
		margin-top: -1rpx
	}

	.main {
		z-index: 0;
		width: 680rpx;
	}

	.loginMain {
		z-index: 0;
		width: 680rpx;
		height: 70vh;
		display: grid;
		grid-template-rows: 4fr 1fr;
	}

	.top-content {
		margin-top: 20rpx;
		margin-bottom: 70rpx;
		width: 680rpx;
		height: 88.25px;
		display: grid;
		grid-template-columns: 1fr 3fr;
	}

	.top-content-avatar {
		position: relative;
	}

	.top-content-text {
		display: flex;
		padding-left: 20rpx;
	}

	.top-content-avatar-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70px;
		height: 70px;
		border-radius: 10000px;
		border: 1px solid #cdcdcd;
	}

	.top-content-text-content {
		text-align: center;
	}

	.loginLogo {
		position: relative;
	}

	.loginLogo-img {
		position: absolute;
		transform: translate(-50%, -30%);
		left: 50%;
		top: 50%;
		width: 104px;
		height: 169px;
	}

	.loginButton {
		padding: 0 20px;
	}
</style>
